<template>
  <div class="RankDetail">
    <van-nav-bar
      left-arrow
      left-text="返回"
      @click-left="goBackHandel"
    ></van-nav-bar>
    <div class="RankTop">
      <img
        :src="listOne.coverImgUrl"
        alt=""
      />
      <div class="bq">
        <h3>{{ listOne.name }}</h3>
        <p>{{ listOne.description }}</p>
      </div>
    </div>
    <table class="RankTables">
      <tr>
        <th></th>
        <th>歌曲</th>
        <th>歌手</th>
        <th>专辑</th>
      </tr>
    </table>
    <table class="RankTable">
      <tr
        v-for="(item, index) in listTwo"
        :key="index"
        @click="playHandel(item.id)"
      >
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.ar[0].name }}</td>
        <td>{{ item.al.name }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import { loadPresByIdAPI } from "../services/RankListDetail";
export default {
  data() {
    return {
      listOne: {},
      listTwo: [],
    };
  },
  async created() {
    const res = await loadPresByIdAPI(this.$route.query.id);
    this.listOne = res.playlist;
    this.listTwo = res.playlist.tracks;
    // console.log(res.playlist.tracks[0]);
  },
  methods: {
    goBackHandel() {
      this.$router.go(-1);
    },
    playHandel(id) {
      // console.log(id);
      this.$router.push({
        name: "Play",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
html,
body,
.RankDetail {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  .van-nav-bar {
    width: 100vw;
    position: absolute;
  }
  .RankTop {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100vw;
    height: 10rem;
    margin: 0 auto;
    margin-top: 2.9rem;
    background-color: rgb(160, 176, 255);
    img {
      width: 6rem;
      margin-left: 2rem;
    }
    .bq {
      flex: 1;
      margin: 0 2rem;
      display: flex;
      flex-direction: column;
      height: 6rem;
      h3 {
        line-height: 1.5;
      }
      p {
        font-size: 0.6rem;
      }
    }
  }
  .RankTables {
    margin-top: 13rem;
    margin-bottom: 0.3rem;
    tr {
      width: 95vw;
      height: 2rem;
      margin: 0 auto;
      display: flex;
      text-align: left;
      line-height: 2rem;
      th:nth-of-type(1) {
        width: 10%;
      }
      th:nth-of-type(2) {
        width: 35%;
      }
      th:nth-of-type(3) {
        width: 25%;
      }
      th:nth-of-type(4) {
        width: 35%;
      }
    }
  }
  .RankTable {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
    tr {
      width: 95vw;
      height: 2rem;
      margin: 0 auto;
      display: flex;
      text-align: left;
      line-height: 2rem;
      background-color: #cde3ffb3;
      th {
        text-align: left;
      }
      td {
        text-align: left;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      td:nth-of-type(1) {
        text-indent: 10px;
        width: 10%;
      }
      td:nth-of-type(2) {
        width: 35%;
      }
      td:nth-of-type(3) {
        width: 25%;
      }
      td:nth-of-type(4) {
        width: 35%;
      }
    }
    tr:nth-of-type(2n) {
      background-color: #ffdceb;
    }
  }
}
</style>
